<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
</head>
<body>
	<select name="" id="sel1" size="6" style="float:left;width:60px;height:130px;">
		<option value="">张三</option>
		<option value="">李四</option>
		<option value="">王五</option>
		<option value="">赵六</option>
	</select>
	<div style="float:left;padding-top:20px;">
	<button id="b1"> > </button><br>
	<button id="b2"> < </button><br>
	<button id="b3">>></button><br>
	<button id="b4"><<</button>
	</div>
	<select name="" id="sel2" size="6" style="float:left;width:60px;height:130px;">
		<option value="">杭州</option>
		<option value="">上海</option>
		<option value="">苏州</option>
		<option value="">南京</option>
	</select>


	<script>
		//右移选中的选项
		$("#b1").click(function(){
			if($("#sel1 option:selected").text()!=""){
				$("#sel2").append("<option value=''>"+$("#sel1 option:selected").text()+"</option>");
				$("#sel1 option:selected").remove();
			}
		});
		//左移选中的选项
		$("#b2").click(function(){
			if($("#sel2 option:selected").text()!=""){
				$("#sel1").append("<option value=''>"+$("#sel2 option:selected").text()+"</option>");
				$("#sel2 option:selected").remove();
			}
		});
		//右移全部选项
		$("#b3").click(function(){
			$.each($("#sel1 option"),function(i,dom){
				$("#sel2").append("<option value=''>"+$(dom).text()+"</option>");
				$("#sel1 option").remove();
			});
		});
		//左移全部选项
		$("#b4").click(function(){
			$("#sel2 option").each(function (i) {
				$("#sel1").append("<option value=''>"+$(this).text()+"</option>");
				$("#sel2 option").remove();
			});
			
		});

	</script>
</body>
</html>